<template>
	<view>
		<qi-navtop :navzuoicof="'icon-icon-test59'"></qi-navtop>
		<scroll-view scroll-y class="scrollbox">
			<!-- 轮播图区域 -->
			<swiper
				:indicator-dots="true"
				:autoplay="true"
				:interval="3000"
				:duration="1000"
				:circular="true"
				class="swiper"
			>
				<swiper-item v-for="(item, i) in studata.getswiper" :key="i">
					<image :src="item.pics_big" @tap="preview(i)"></image>
				</swiper-item>
			</swiper>
			<!-- 商品信息区域 -->
			<view class="goods-info-box">
				<view class="price">
					￥{{ studata.goods_List.goods_price }}
				</view>
				<view class="goods-info-body">
					<view class="goods-name">
						{{ studata.goods_List.goods_name }}
					</view>
					<view class="iconfont icon-icon-test56">
						<text>收藏</text>
					</view>
				</view>
				<view class="info-bodykd">快递：免运费{{ selectnum }}</view>
			</view>
			<!-- <rich-text :nodes="studata.goods_List.goods_introduce"></rich-text> -->
			<goodscart
				@addcart="addcart"
				:selectnum="selectnum"
			></goodscart>
		</scroll-view>
	</view>
</template>

<script setup>
import {
	reactive,
	onMounted,
	computed,
	getCurrentInstance
} from 'vue';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import goodscart from './goodscart.vue';
import { useStore } from 'vuex'; // 引入useStore 方法
const store = useStore(); // 该方法用于返回store 实例
let { getters } = useStore();

let selectnum = computed(() => getters['qi_cart/total']);
console.log(store); // store 实例对象
store.commit('qi_cart/SELECTEDHOUSE', ' 12321312 ');
let studata = reactive({
	getswiper: [],
	goods_List: {},
	goods_introduce: ''
});

const { proxy } = getCurrentInstance();
onLoad(id => {
	GetGoodsDetail(id);
});
const GetGoodsDetail = id => {
	proxy.$http({ url: '/goods/detail', data: id }).then(res => {
		if (res.meta.status === 200) {
			studata.getswiper = res.message.pics;
			res.message.goods_introduce = res.message.goods_introduce
				.replace(/<img /g, '<img style="display:block;" ')
				.replace(/webp/g, 'jpg');
			studata.goods_List = res.message;
		}
	});
};
const preview = i => {
	uni.previewImage({
		current: i,
		urls: studata.getswiper.map(x => x.pics_big)
	});
};
const addcart = val => {
	console.log(val);
	const goods = {
		goods_id: studata.goods_List.goods_id,
		goods_name: studata.goods_List.goods_name,
		goods_price: studata.goods_List.goods_price,
		goods_count: 1,
		goods_small_logo: studata.goods_List.goods_small_logo,
		goods_state: true
	};
	store.dispatch('qi_cart/addDataListCart', goods);
};
</script>

<style lang="scss">
.scrollbox {
	height: calc(100vh - 50px);
}
.swiper {
	image {
		width: 100%;
		height: 100%;
	}
	height: 300px;
}
.goods-info-box {
	.price {
		color: red;
		padding: 10px 0;
	}
	.goods-info-body {
		display: flex;
		justify-content: space-between;
		.goods-name {
			overflow: hidden;
			text-overflow: ellipsis;
			-webkit-line-clamp: 2;
			display: -webkit-box;
			-webkit-box-orient: vertical;
		}
		.iconfont {
			width: 100px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			text {
				font-size: 12px;
			}
		}
	}
	.info-bodykd {
		padding: 10px 0;
		font-size: 12px;
		color: gray;
	}
}
</style>
